<template>
  <el-container :class="theme" v-loading="pageLoading">

      <el-aside
          class="left-select"
          :style="{width: 'auto'}"
      >
        <div class="logo" >
          <span :class="!isCollapse?'logo-span':'logo-span-pack-up'">N U O</span>
        </div>
        <el-scrollbar class="menu-scrollbar">
          <el-menu
              :collapse-transition="true"
               class="el-menu-nuo"
              :default-active="$store.getters['page-tabs/getSelectTag']"
              :collapse="isCollapse">
              <menu-tree :is-collapse="isCollapse" @setScrollbar="setScrollbar"  :data-list="menus"></menu-tree>
          </el-menu>
        </el-scrollbar>
      </el-aside>

    <el-container>
      <el-header>
        <i
            :class="flexibleIcon"
            @click="flexible"
            class="menu-button"
        ></i>
        <div style="float: right">
          <div class="nuo-dropdown">
            <el-select size="mini" v-model="theme" style="margin-right: 10px;width: 100px">
              <el-option
                  v-for="item in themeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
            <el-dropdown >
                <span class="el-dropdown-link nuo-user">
                  {{$store.getters['user/getRealName']}}
                </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item  icon="el-icon-user">个人中心</el-dropdown-item>
                  <el-dropdown-item @click="loginOut" icon="el-icon-switch-button">注销</el-dropdown-item></el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          <el-avatar class="nuo-avatar"  src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201509%2F16%2F20150916235818_HVAk2.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621828125&t=0ca273c915210298715097a23c18db68"></el-avatar>
        </div>
      </el-header>
       <div class="title-index">
        <el-scrollbar   ref="scrollbar" id="scrollbar" style="height: 32px;width: 100%;white-space:nowrap">

              <el-tag
                  v-for="(item,index) in tags"
                  :key="item.id"
                  :id="`tag${item.id}`"
                  style="margin-left: 5px"
                  closable
                  :class="$store.getters['page-tabs/getSelectTag'] == item.componentName?'menuTagSelect':'menuTag'"
                  @click="cutPage(item.componentName,index)"
                  @close="handleClose(index,item.componentName)">
                {{item.name}}
              </el-tag>
        </el-scrollbar>
      </div>

      <el-main class="main">
          <router-view  v-slot="{ Component }">
            <transition mode="out-in" name="fade">
              <keep-alive :include='include'>
                  <component  :is="Component"/>
              </keep-alive>
            </transition>
          </router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import menuTree from '@/sys/base/menu/menu-tree'
import {VueUtil} from "@/util";
import {NuoUserController} from "@/actions/controller";

export default {
  name: "home",
  components:{
    menuTree
  },
  created() {
    this.$store.commit('user/setUserData',window.localStorage.getItem("user"))
  },
  data() {
    return {
      isCollapse: false,
      flexibleIcon: 'el-icon-s-fold',
      menus: [],
      tags: this.$store.getters["page-tabs/getLabs"],
      include: this.$store.getters["page-tabs/getLabIds"],
      tagIndex: 0,
      pageLoading: false,
      theme: 'default',
      themeList:[
        {
          label: '默认主题',
          value: 'default'
        },
        {
          label: '橙色主题',
          value: 'orange'
        },
        {
          label: '蓝色主题',
          value: 'blue'
        }
      ]
    }
  },
  mounted() {
    this.getMenus()
  },
  methods: {
    flexible() {
      this.isCollapse = !this.isCollapse
      if ("el-icon-s-fold" === this.flexibleIcon) {
        this.flexibleIcon = "el-icon-s-unfold"
      } else {
        this.flexibleIcon = "el-icon-s-fold"
      }
    },
    loginOut(){
      this.pageLoading = true
      VueUtil(this).ajax(NuoUserController.loginOut).then(res=>{
        VueUtil(this).hint(res.message)
        localStorage.clear();
        this.$router.push({name:'login'})
        this.pageLoading = false
      }).catch(()=>{
        this.pageLoading = false
      })
    },
    getMenus(){
      let menus = window.localStorage.getItem("menus");
      if(menus){
        let menuObj = JSON.parse(menus);
        this.menus = menuObj
      }
    },
    cutPage(componentName){
      this.$store.commit('page-tabs/setSelectTag',componentName)
      this.$router.push({name:componentName})

    },
    setScrollbar(id){
      this.$nextTick(()=>{
        this.$refs.scrollbar.$refs.wrap.scrollLeft = document.getElementById("tag"+id).offsetLeft
      })

    },
    handleClose(index,componentName){
      let selectTag = this.$store.getters['page-tabs/getSelectTag']
      let labs = this.$store.getters["page-tabs/getLabs"]
      if(labs.length > 1){
        this.$store.commit('page-tabs/delLabIds',index)
        this.$store.commit('page-tabs/delLabs',index)
      }
      if(selectTag === componentName){
        this.$store.commit('page-tabs/setSelectTag',labs[labs.length-1].componentName)
        this.$router.push({name:labs[labs.length-1].componentName})
      }



    }
  }
}
</script>

<style scoped>



</style>
<style>

</style>

